<template>
    <el-form label-suffix=":" v-loading="loading" :model="formData" :rules="editable ? formRules : null" ref="formRef" label-width="120px">
        <el-row>
            <vp-col :span="4">
                <el-form-item prop="bgrq">
                    <template #label><vp-label zh="报告日期" en="Report Date"/></template>
                    <el-date-picker 
                        v-model="formData.bgrq" 
                        v-if="editable" 
                        type="date" 
                        value-format="YYYY-MM-DD" 
                        class="w100"
                    />
                    <span v-else>{{formData.bgrq}}</span>
                </el-form-item>
            </vp-col>
            <vp-col :span="4">
                <el-form-item prop="bgrmc">
                    <template #label><vp-label zh="报告人" en="Reporter"/></template>
                    <el-input readonly v-model="formData.bgrmc" v-if="editable">
                        <template #append>
                            <el-button @click="handleSearchCaptainConsignor"><SvgIcon name="ele-Search"/></el-button>
                        </template>
                    </el-input>
                    <span v-else>{{formData.bgrmc }}</span>
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="1">
                <el-form-item prop="sjms">
                    <template #label><vp-label zh="事件补充描述" en="Incid. Suppl. Desc."/></template>
                    <el-input
                        v-model="formData.sjms"
                        v-if="editable" 
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        maxlength="1300"
                    />
                    <span v-else >{{ formData.sjms }}</span>
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row>
            <vp-col :span="1">
                <el-form-item prop="clqk">
                    <template #label><vp-label zh="处理情况补充" en="Suppl. Handling Status"/></template>
                    <el-input
                        v-model="formData.clqk"
                        v-if="editable" 
                        :autosize="{ minRows: 3}"
                        type="textarea"
                        maxlength="1300"
                    />
                     <span v-else >{{ formData.clqk }}</span>
                </el-form-item>
            </vp-col>
        </el-row>
        <el-row v-if="editable">
            <vp-col :span="4">
                <el-form-item prop="bmshrmc">
                    <template #label><vp-label zh="部门审核人" en="Dept. Reviewer"/></template>
                    <el-input readonly v-model="formData.bmshrmc">
                        <template #append>
                            <el-button @click="handleSearchAuditor"><SvgIcon name="ele-Search"/></el-button>
                        </template>
                    </el-input>
                </el-form-item>
            </vp-col>
        </el-row>
        <FileListCard
            :attachmentList="formData.attachments"
            :readOnly="!editable"
            @attachmentListEmit="formData.attachments = $event">
        </FileListCard>
        <UserDialog ref="userDialogRef"></UserDialog>
    </el-form>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, toRefs } from 'vue'
import validateUtils from '/@/utils/validateUtils';
import UserDialog from '/@/components/vp/user/VpUserDialog.vue';
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import { formatDate } from '/@/utils/formatTime';
import { useUserInfo } from '/@/stores/userInfo';

export default defineComponent({
    name:'abnormalList',
    props: {
        type: {
            type: String,
            default: 'add',
        }
    },
    components: { UserDialog, FileListCard},
    setup(props) {
        const user = useUserInfo().userInfos.user;
        const state = reactive({
            loading: false,
            saveLoading: false,
            csid: '',
            csmc: '',
            formData:{
                id: '',
                bgrq: formatDate(new Date(), "YYYY-mm-dd"),
                bgrid: user.id,
                bgrmc: user.realname,
                bgbmid: user.bmdm,
                bgbmmc: user.bmmc,
                sjms: '',
                clqk: '',
                bmshrid: '',
                bmshrmc: '',
                attachments: [],
            },
            formRules:{
                bgrq: [validateUtils.notNull],
                bgrmc: [validateUtils.notNull],
                sjms: [validateUtils.notNull],
                clqk: [validateUtils.notNull],
                bmshrmc: [validateUtils.notNull],
            },
		});

        const initFormData = ()=>{
            state.formData = {
                id: '',
                bgrq: formatDate(new Date(), "YYYY-mm-dd"),
                bgrid: user.id,
                bgrmc: user.realname,
                bgbmid: user.bmdm,
                bgbmmc: user.bmmc,
                sjms: '',
                clqk: '',
                bmshrid: '',
                bmshrmc: '',
                attachments: [],
            }
        }

        const editDialogRef = ref();
        const formRef = ref();
        const userDialogRef = ref();

        /**
         * 设置页面数据
         */
        const setData = (formData: any) => {
            initFormData();
            state.formData = {
                ...state.formData,
                ...formData,
            };
        }

        /**
         * 获取页面数据
         */
        const getData = () => {
            return {
                ...state.formData
            };
        }

        /**
         * 验证页面数据
         */
        const validate = () => {
            let promise = new Promise((resolve, reject) => {
                formRef.value.validate((valid: boolean) => {
                    if (valid) {
                        resolve(true);
                    } else {
                        reject();
                    }
                })
            })
            return promise;
        }

        const editable = computed(() => {
            return props.type === 'add' || props.type === 'edit';
        })

        const handleSearchCaptainConsignor = ()=>{
            userDialogRef.value.handleOpen({
                type: 1,
                multi: false,
                selected: state.formData.bgrid,
                callback: (obj: any) => {
                    state.formData.bgrid = obj.yhid;
                    state.formData.bgrmc = obj.xm;
                    state.formData.bgbmid = obj.bmdm;
                    state.formData.bgbmmc = obj.bmmc;
                }
            });
		}

        /**
         * 选择审核人
         */
         const handleSearchAuditor = ()=>{
            userDialogRef.value.handleOpen({
                type: 1,
                multi: false,
                selected: state.formData.bmshrid,
                callback: (obj: any) => {
                    state.formData.bmshrid = obj.yhid;
                    state.formData.bmshrmc = obj.xm;
                }
            });
		}


        return {
            ...toRefs(state),
            ...toRefs(props),
            editDialogRef,
            formRef,
            setData,
            getData,
            userDialogRef,
            validate,
            editable,
            handleSearchCaptainConsignor,
            handleSearchAuditor,
        }
    },
})
</script>